<template>
  <div class="echartsBox">
    <ul>
      <li>
        <div id="situationEchartsGauge" class="allWidthHeight" />
        <p>水箱水位</p>
      </li>
      <li>
        <div id="situationEchartsGauge2" class="allWidthHeight" />
        <p>水箱压力</p>
      </li>
      <li>
        <div id="situationEchartsGauge3" class="allWidthHeight" />
        <p>消防栓压力</p>
      </li>
      <li>
        <div id="situationEchartsGauge4" class="allWidthHeight" />
        <p>水网压力</p>
      </li>
    </ul>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      value1: ''
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
      this.myChart2.resize()
      this.myChart3.resize()
      this.myChart4.resize()
    },
    getInfo(data) {
      this.setSituationEchartsGauge(data)
      this.setSituationEchartsGauge2(data)
      this.setSituationEchartsGauge3(data)
      this.setSituationEchartsGauge4(data)
    },
    /* echarts */
    setSituationEchartsGauge(data) {
      const option = {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '45%'],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, '#1D8EFE'],
                  [0.7, '#1D8EFE'],
                  [1, '#1D8EFE']
                ]
              }
            },
            pointer: {
              length: '80%',
              width: 2,
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: '#42E4FB',
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff',
              distance: 10,
              fontSize: 8
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}\n 米',
              color: '#fff',
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, '30%']
            },
            data: [
              {
                value: data.waterLevel
              }
            ],
            max: 30
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(
        document.getElementById('situationEchartsGauge')
      )
      this.myChart.clear()
      this.myChart.setOption(option, true)
    },
    setSituationEchartsGauge2(data) {
      const option = {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '45%'],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, '#F57474'],
                  [0.7, '#F57474'],
                  [1, '#F57474']
                ]
              }
            },
            pointer: {
              length: '80%',
              width: 2,
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: '#F57474',
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff',
              distance: 10,
              fontSize: 8
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}\n 吨',
              color: '#fff',
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, '30%']
            },
            data: [
              {
                value: data.waterTank
              }
            ],
            max: 50
          }
        ]
      }
      if (
        this.myChart2 != null &&
        this.myChart2 !== '' &&
        this.myChart2 !== undefined
      ) {
        this.myChart2.dispose() // 销毁
      }
      this.myChart2 = echarts.init(
        document.getElementById('situationEchartsGauge2')
      )
      this.myChart2.clear()
      this.myChart2.setOption(option, true)
    },
    setSituationEchartsGauge3(data) {
      const option = {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '45%'],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, '#56D0E3'],
                  [0.7, '#56D0E3'],
                  [1, '#56D0E3']
                ]
              }
            },
            pointer: {
              length: '80%',
              width: 2,
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: '#56D0E3',
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff',
              distance: 10,
              fontSize: 8
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}\n 吨',
              color: '#fff',
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, '30%']
            },
            data: [
              {
                value: data.waterHydrants
              }
            ],
            max: 30
          }
        ]
      }
      if (
        this.myChart3 != null &&
        this.myChart3 !== '' &&
        this.myChart3 !== undefined
      ) {
        this.myChart3.dispose() // 销毁
      }
      this.myChart3 = echarts.init(
        document.getElementById('situationEchartsGauge3')
      )
      this.myChart3.clear()
      this.myChart3.setOption(option, true)
    },
    setSituationEchartsGauge4(data) {
      const option = {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '45%'],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.3, '#8B78F6'],
                  [0.7, '#8B78F6'],
                  [1, '#8B78F6']
                ]
              }
            },
            pointer: {
              length: '80%',
              width: 2,
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: 0,
              length: 3,
              lineStyle: {
                color: '#8B78F6',
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff',
              distance: 10,
              fontSize: 8
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}\n 吨',
              color: '#fff',
              fontSize: 10,
              lineHeight: 10,
              offsetCenter: [0, '30%']
            },
            data: [
              {
                value: data.waterNetwork
              }
            ],
            max: 30
          }
        ]
      }
      if (
        this.myChart4 != null &&
        this.myChart4 !== '' &&
        this.myChart4 !== undefined
      ) {
        this.myChart4.dispose() // 销毁
      }
      this.myChart4 = echarts.init(
        document.getElementById('situationEchartsGauge4')
      )
      this.myChart4.clear()
      this.myChart4.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 40px);
  ul {
    height: 100%;
    overflow: hidden;
    li {
      width: 25%;
      float: left;
      height: 100%;
      position: relative;
      p {
        margin: 0;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        color: #fff;
        text-align: center;
        font-size: 12px;
      }
    }
  }
}
</style>
